<!--
 * @name: 
 * @Author: zzq
 * @LastEditors: zzq
 * @Date: 2021-11-26 09:18:46
 * @LastEditTime: 2021-11-26 09:26:16
 * @Description: 
-->
<template>
  <div>
    <h2 class="head">同学录</h2>
    <button @click="handleAdd" v-show="!(isAdd||isCorrect)">新增</button>
    <ol v-show="!(isAdd||isCorrect)">
      <li v-for="(item,index) in classmateArr" :key="index">
        姓名：{{item.name}} &nbsp;&nbsp;
        性别：{{item.gender}}&nbsp;&nbsp;
        电话：{{item.tel}}&nbsp;&nbsp;
        <div class="btn">
          <button @click="handleDetail(item)" class="corBtn">查看</button>
          <button @click="handleDelete(item,index)">删除</button>
        </div>
        <br/>
      </li>
    </ol>
    <button @click="handleElement">增删改查</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return{
  
      isAdd:false,
      isCorrect:false,
    }
  },
  // mounted(){
  //   // if(sessionStorage.getItem('classmateArr')){
  //   //  let classmateArr =  JSON.parse(sessionStorage.getItem('classmateArr'))
  //   //      this.$store.commit('add',classmateArr) //只能通过vuex里面的方法来改变里面的数据
  //   //     console.log('加载完成')
  //   //   }
  // },

  methods:{
    handleAdd(){
      this.$router.push('/add')
    },
    handleDetail(item){
      console.log('id',item.id)
      this.$router.push({path:'/detail',query:{id:item.id}})
    },
    handleDelete(item,index){
      console.log('删除',item,index)
      this.$store.commit('delete',index)
    },
    handleElement(){
      this.$router.push('/element')
    }
  },
  computed: {
    classmateArr(){
      return this.$store.state.classmateArr
    }
  },
}
</script>
<style>
  .head{
    display:inline-block;
    margin-right:20px
  }
  .btn{
    margin-top:10px;
    margin-left:100px;
    display:inline-block
  }
 
</style>
